import { Avatar } from '@/components/Avatar'
import { IconCheckbox } from '@/pages/manager/components'
import React, { useContext } from 'react'
import { Wrap, IconRemove } from './style'
import { TerMode } from '../interface'
import { createMemberContext } from '../context'

export const ListItem = ({ mcc, status: { checked }, uuid }: TerMode) => {
	const itemHandle = useContext(createMemberContext)

	const handleCheckItem = (e: React.MouseEvent) => {
		if (e.ctrlKey) {
			itemHandle(uuid, 'ctrl')
		} else if (e.shiftKey) {
			itemHandle(uuid, 'shift')
		} else {
			itemHandle(uuid, 'click')
		}
	}
	const handleMultiCheck = (e: React.MouseEvent) => {
		e.stopPropagation()
		itemHandle(uuid, 'ctrl')
	}

	const handleRemove = (e: React.MouseEvent) => {
		e.stopPropagation()
		itemHandle(uuid, 'remove')
	}
	return (
		<Wrap checked={checked} title={mcc.name} onClick={handleCheckItem}>
			<div className="checkbox-wrap" onClick={handleMultiCheck}>
				<IconCheckbox className="icon-checkbox" />
			</div>
			<div className="avatar">
				<Avatar value={mcc} />
			</div>
			<div className="name">
				<pre>{mcc.name}</pre>
			</div>
			<IconRemove className="remove" onClick={handleRemove} />
		</Wrap>
	)
}
